<template>
  <div class="register-page">
    <div class="register">
      <h2>Register</h2>
      <div class="row">
        <span>账号：</span>
        <input type="text" name="username" v-model="username" maxlength="20" @blur="checkUsername">
      </div>
      <p class="warn" v-show="!validUsername">账号应在4-20位之间</p>
      <div class="row">
        <span>密码：</span>
        <input type="password" name="password" v-model="password" maxlength="20" @blur="checkPassword">
      </div>
      <p class="warn" v-show="!validPassword">密码应在4-20位之间</p>
      <div class="row">
        <span>确认密码：</span>
        <input type="password" name="passwordAgain" v-model="passwordAgain" maxlength="20" @blur="checkPasswordAgain">
      </div>
      <p class="warn" v-show="!validPasswordAgain">两次密码输入不一致</p>
      <div class="row">
        <span>昵称：</span>
        <input type="text" name="nickname" v-model="nickname" maxlength="15">
      </div>
      <div class="links">
        <router-link class="link" to="/login">返回登录</router-link>
      </div>
      <div class="row">
        <button @click="userRegister">注册</button>
        
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { ElMessage } from 'element-plus'
import router from '../router'
import axios from "axios"

export default {
  name: 'RegisterPage',
  setup() {
    let registerInfo = reactive({
      username: '',
      password: '',
      passwordAgain: '',
      nickname: '',
      validUsername: true,
      validPassword: true,
      validPasswordAgain: true,
    })
    
    const checkUsername = () => {
      registerInfo.validUsername =  registerInfo.username.length >= 4
    }
    const checkPassword = () => {
      registerInfo.validPassword = registerInfo.password.length >= 4
    }
    const checkPasswordAgain = () => {
      registerInfo.validPasswordAgain =  (registerInfo.password == registerInfo.passwordAgain)
    }
    const userRegister = () => {
      if(!registerInfo.validUsername || !registerInfo.validPassword) {
        return
      } else if(!registerInfo.nickname) {
        ElMessage.error('昵称不能为空！')
        return
      }
      axios.post('http://localhost/api/register', {
        username: registerInfo.username,
        password: registerInfo.password,
        nickname: registerInfo.nickname
      }).then(res => {
        if(res.data.allowed) {
          ElMessage.success('注册成功！')
          router.push('/login')
        } else if(res.data.invalidUsername) {
          ElMessage.error('账号已存在！')
        } else if(res.data.invalidNickname) {
          ElMessage.error('昵称已存在！')
        } else {
          ElMessage.error('未知错误！')
        }
      }).catch(err => {
        ElMessage.error('未知错误！')
        console.log(err.message)
      })
      
    }

    return {
      ...toRefs(registerInfo),
      checkUsername,
      checkPassword,
      checkPasswordAgain,
      userRegister
    }
  }
}
</script>

<style scoped>
  .register-page {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: url(@/assets/yashiki.png) no-repeat;
    background-size: cover;
  }
  .register {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 360px;
    height: 400px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    letter-spacing: 1px;
  }
  .row {
    display: flex;
    align-items: center;
    margin: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
  }
  span {
    width: 85px;
    text-align: right;
  }
  h2 {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.9);
  }
  input {
    width: 250px;
    height: 35px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    box-sizing: border-box;
    transition: 0.2s;
    outline: none;
    padding: 0 10px;
  }
  .warn {
    color: 	#CC0000;
    font-size: 10px;
  }
  button {
    width: 120px;
    height: 35px;
    margin: 0 5px;
    border: 1px solid rgba(197, 81, 58, 0.8);
    background: rgba(197, 81, 58, 0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    transition: 0.2s;
  }
  button:hover {
    border: 1px solid rgba(248, 108, 76, 0.8);
    background: rgba(248, 108, 76, 0.5);
  }
  .links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
  }
  .link {
    text-decoration: none;
    color: gray;
    font-size: 12px;
  }
  .link:hover {
    color: rgba(255, 255, 255, 0.9);
  }
</style>